<template>
  <div class="remind">
    <!-- 导航栏 -->
    <van-nav-bar title="开课提醒" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <!-- 开课短信提醒 -->
      <van-cell left title="开课短信提醒">
        <template #right-icon>
          <van-switch
            :value="checkedNote"
            size="24"
            @input="noteChange"
            :active-color="orange"
            :inactive-color="grey"
          />
        </template>
      </van-cell>
      <!-- 课表同步系统日历 -->
      <van-cell left title="课表同步到系统日历">
        <template #right-icon>
          <van-switch
            :value="syncCalendar"
            size="24"
            @input="calendarChange"
            :active-color="orange"
            :inactive-color="grey"
          />
        </template>
      </van-cell>
      <!-- 微信开课提醒 -->
      <van-cell left title="微信开课提醒" @click="showPopup">
        <template #right-icon>
          <van-switch
            v-model="wxRemind"
            size="24"
            :active-color="orange"
            :inactive-color="grey"
          >
          </van-switch>
        </template>
        <van-popup v-model="show" closeable @click-close-icon="closePopup">
          <div>
            <h3>设置开课提醒</h3>
            <p>Step1</p>
            <span>微信搜索ikaochong关注考虫服务号</span>
            <div class="rempic">
              <img src="/remind/微信开课提醒.jpg" alt="" />
            </div>
            <p>Step2</p>
            <span>通过服务号提示连接绑定账号</span>
            <van-button round @click="turnTo">去绑定微信</van-button>
          </div>
        </van-popup>
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      checkedNote: true,
      syncCalendar: true,
      wxRemind: false,
      orange: "#FFCB00",
      grey: "#eee",
      show: false,
    };
  },
  methods: {
    //返回上一页
    onClickLeft() {
      this.$router.push("/weipersonal");
    },
    //开课短信提醒
    noteChange(checkedNote) {
      //如果用户点击关闭，则提示以下信息
      if (checkedNote == false) {
        this.$dialog
          .confirm({
            message: `    关闭开课短信提醒后，所有课程的开课通知将不再发送，有可能会导致您错过重要课程，请悉知。`,
          })
          .then(() => {
            this.checkedNote = checkedNote;
          })
          .catch(()=>{
            this.checkedNote = true;
          });
      } else {
        //用户开启短信提醒功能有如下提示
        Toast("已开启");
        this.checkedNote = checkedNote;
      }
    },
    //课表同步系统日历功能
    calendarChange(syncCalendar) {
      //关闭时的提示
      if (syncCalendar == false) {
        Toast("已关闭");
        this.syncCalendar = syncCalendar;
      } else {
        //开启时的提示
        Toast("已开启");
        this.syncCalendar = syncCalendar;
      }
    },
    //点击微信开课提醒显示弹出层
    showPopup() {
      this.show = true;
    },
    //点击关闭图片，则关闭弹出层
    closePopup(event) {
      event.stopPropagation();
      this.show = false;
      this.wxRemind = false;
    },
    //点击去绑定微信跳转微信
    turnTo(){
      window.location.href = "weixin://";
    }
  },
};
</script>
<style lang='scss'>
.remind {
  text-align: left;
  height: 100vh;
  .van-nav-bar {
    background-color: #eee;
    .van-icon {
      color: #000;
    }
  }
  .van-cell__value {
    text-align: center;
    color: #000;
  }
  .van-cell {
    p {
      margin: 4px 0;
    }
    .van-popup {
      width: 88vw;
      border-radius: 10px;
    }
    .rempic {
      width: 80%;
      margin: 0 auto;
      img {
        width: 100%;
      }
    }
    button {
      display: block;
      margin: 5vw auto;
      background-color: #ffcb00;
      border: 1px solid #ffcb00;
      width: 80%;
    }
  }
}
</style>